@extends('layouts.app')

@section('title', $category->name . ' - 分类')

@section('content')
<div class="container py-4">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('home') }}">首页</a></li>
            <li class="breadcrumb-item"><a href="{{ route('categories.index') }}">分类</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ $category->name }}</li>
        </ol>
    </nav>

    <!-- Category Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="bg-light p-4 rounded">
                <h1 class="h2 mb-2">{{ $category->name }}</h1>
                @if($category->description)
                    <p class="text-muted mb-0">{{ $category->description }}</p>
                @endif
                <small class="text-muted">共 {{ $posts->total() }} 篇文章</small>
            </div>
        </div>
    </div>

    <!-- Child Categories -->
    @if($childCategories->count() > 0)
        <div class="row mb-4">
            <div class="col-12">
                <h4 class="mb-3">子分类</h4>
                <div class="row g-3">
                    @foreach($childCategories as $childCategory)
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-body">
                                    <h6 class="card-title">
                                        <a href="{{ route('categories.show', $childCategory->slug) }}" class="text-decoration-none">
                                            {{ $childCategory->name }}
                                        </a>
                                    </h6>
                                    @if($childCategory->description)
                                        <p class="card-text small text-muted">{{ Str::limit($childCategory->description, 80) }}</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif

    <!-- Search Form -->
    <div class="row mb-4">
        <div class="col-md-6">
            <form method="GET" action="{{ route('categories.show', $category->slug) }}">
                <div class="input-group">
                    <input type="text" class="form-control" name="search" 
                           placeholder="在此分类中搜索..." value="{{ request('search') }}">
                    <button class="btn btn-outline-primary" type="submit">搜索</button>
                    @if(request('search'))
                        <a href="{{ route('categories.show', $category->slug) }}" class="btn btn-outline-secondary">
                            清除
                        </a>
                    @endif
                </div>
            </form>
        </div>
    </div>

    <!-- Posts List -->
    @if($posts->count() > 0)
        <div class="row g-4">
            @foreach($posts as $post)
                <div class="col-lg-6">
                    <div class="card post-card h-100 shadow-sm">
                        <div class="row g-0 h-100">
                            @if($post->cover_image_id)
                                <div class="col-md-4">
                                    <img src="{{ $post->coverImage->url ?? '' }}" 
                                         class="img-fluid rounded-start h-100" 
                                         alt="{{ $post->title }}" 
                                         style="object-fit: cover;">
                                </div>
                                <div class="col-md-8">
                            @else
                                <div class="col-12">
                            @endif
                                <div class="card-body d-flex flex-column h-100">
                                    <h5 class="card-title">
                                        <a href="{{ route('posts.show', $post->slug) }}" class="text-decoration-none">
                                            {{ $post->title }}
                                        </a>
                                    </h5>
                                    
                                    @if($post->excerpt)
                                        <p class="card-text text-muted">{{ Str::limit($post->excerpt, 100) }}</p>
                                    @endif
                                    
                                    <div class="mt-auto">
                                        <!-- Post Meta -->
                                        <div class="post-meta mb-2">
                                            <small class="text-muted">
                                                <i class="bi bi-calendar"></i> {{ $post->published_at->format('Y-m-d') }}
                                                <i class="bi bi-person ms-2"></i> {{ $post->user->name }}
                                            </small>
                                        </div>
                                        
                                        <!-- Tags -->
                                        @if($post->tags->count() > 0)
                                            <div class="mb-2">
                                                @foreach($post->tags->take(3) as $tag)
                                                    <a href="{{ route('tags.show', $tag->slug) }}" class="tag">
                                                        {{ $tag->name }}
                                                    </a>
                                                @endforeach
                                                @if($post->tags->count() > 3)
                                                    <span class="text-muted small">+{{ $post->tags->count() - 3 }}</span>
                                                @endif
                                            </div>
                                        @endif
                                        
                                        <a href="{{ route('posts.show', $post->slug) }}" class="btn btn-primary btn-sm">
                                            阅读更多
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        
        <!-- Pagination -->
        <div class="row mt-5">
            <div class="col-12">
                {{ $posts->appends(request()->query())->links() }}
            </div>
        </div>
    @else
        <div class="text-center py-5">
            <h3 class="text-muted">暂无文章</h3>
            <p class="text-muted">
                {{ request('search') ? '没有找到符合搜索条件的文章' : '此分类下还没有文章' }}
            </p>
            @if(request('search'))
                <a href="{{ route('categories.show', $category->slug) }}" class="btn btn-outline-primary">
                    查看所有文章
                </a>
            @endif
        </div>
    @endif
</div>
@endsection